import React from 'react';
import { Modal } from 'antd';
import ProCard from '@ant-design/pro-card';
import { ProFormField } from '@ant-design/pro-form';

const FileInfoModal: React.FunctionComponent<any> = (props) => {

  const {
    modalVisible = false,
    handleModalCancel,
    dsToJSData = {},
  } = props;
  const { DSName, dsObj = {}, tableConfig = [], formConfig = [] } = dsToJSData;

  return (
    <Modal
      title='生成的DS和配置文件内容'
      visible={modalVisible}
      footer={null}
      onCancel={handleModalCancel}
      className='my-ds-file-modal'
      width={800}
    >
      <ProCard
        tabs={{ type: 'card' }}
      >
        <ProCard.TabPane key='ds' tab={`${DSName}.json`}>
          <ProFormField
            ignoreFormItem
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
            mode='read'
            valueType='jsonCode'
            text={JSON.stringify(dsObj)}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key='columns' tab='columns.json'>
          <ProFormField
            ignoreFormItem
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
            mode='read'
            valueType='jsonCode'
            text={JSON.stringify(tableConfig)}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key='formItem' tab='fromItem.json'>
          <ProFormField
            ignoreFormItem
            fieldProps={{
              style: {
                width: '100%',
              },
            }}
            mode='read'
            valueType='jsonCode'
            text={JSON.stringify(formConfig)}
          />
        </ProCard.TabPane>
      </ProCard>
    </Modal>
  );
};

export default FileInfoModal;